iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

每天一份前端小作品系列 第 5

【Day5】用HTML&CSS做漸層色

  • 分享至 

  • xImage
  •  

本日小作品:
https://codepen.io/linchinhsuan/pen/GRZXyMq

練習重點摘要:

<a href="#top">

id有錨點的功能,所以當我在<div class="text">上加上對應的id,就可以讓這個<a>連結起到「回到最上方」的效果。

linear-gradient(-90deg,#fff1eb,#ace0f9);

漸層色的寫法,三個值分別是方向/顏色一/顏色二。0度為由下往上,然後順時間走,所以-90deg就是顏色一由右往左的意思。
這裡推薦一個網站可以找到漂亮的漸層色:
https://webgradients.com/

linear-gradient(to right,#ff9a9e,#fad0c4);

除了角度之外,linear-gradient還支援用方向表示,例如to right(相當於90deg)/to top(相當於0deg)來表示漸層的角度。

outline: none

當input或是textarea取得焦點的時候,會有預設的外框線效果,預設的跟背景顯得很突兀所以這裡把它拿掉。

border-radius: 50%;

圓角效果,如果只寫一個值的話就是四邊都要有圓角效果。若值為50%的話就可以畫出正圓形。

---

【備註】本日新聞來源:
https://tw.news.yahoo.com/mlb-%E6%9F%AF%E7%88%BE%E9%81%94%E7%99%BE%E5%8B%9D%E9%87%8C%E7%A8%8B%E7%A2%91-%E8%83%8C%E5%BE%8C%E8%88%87%E8%B9%B2%E6%8D%95%E6%90%AD%E6%93%8B%E8%97%8F%E5%A4%9A%E5%B9%B4%E6%83%85%E8%AA%BC-070544830.html

---

本日結語:
今天是第五天,主要是練習漸層色和表單的內容,若有誤之處懇請各路高手賜教!


上一篇
【Day4】用HTML&CSS做職棒戰績表
下一篇
【Day6】用jQuery讓網頁動起來
系列文
每天一份前端小作品30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言